<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--guohanyu-->
    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="../resources/css/laypage.css"/>
    <link rel="stylesheet" href="../resources/layui/css/layui.css"/>
    <script type="text/javascript" src="../resources/js/jquery/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../resources/laypage/laypage.js"></script>
    <script type="text/javascript" src="../resources/layui/layui.all.js"></script>
    <script type="text/javascript" src="../resources/vue/vue.js"></script>
</head>
<body>
<div id="app" class="container">
    <form class="form-inline bg-danger" role="form">
        查询条件：
        <div class="form-group">
            <label class="sr-only" for="field">请选择分类</label>
            <select class="form-control" id="field">
                <option value="0">请选择分类</option>
                <option v-for="(item,index) in fieldListresult" v-bind:value="item.fieldId">{{item.fieldName}}</option>
            </select>
        </div>
        <div class="form-group">
            <label class="sr-only" for="point">详细分类</label>
            <select class="form-control" id="point">
                <option value="0">请先选择分类</option>
                <option v-for="(item,index) in pointListresult" v-bind:value="item.pointId">{{item.pointName}}</option>
            </select>
        </div>
        <div class="form-group">
            <label class="sr-only" for="examPaperName">试卷标题</label>
            <input type="text" class="form-control" id="examPaperName" placeholder="输入试卷名称查询">
        </div>
        <button type="button" id="findExamPaper" class="btn btn-success">查询试卷</button>
    </form>

    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr class="success">
                <td>序号</td>
                <td>试卷</td>
                <td>建议考试时间</td>
                <td>选择</td>
            </tr>
            </thead>
            <tbody>
            <tr class="active" v-for="(item,index) in result">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.duration}}</td>
                <td><a href="javascript:void(0)" v-bind:value="item.id" v-bind:paperName="item.name"
                       @click="examPaperSelect">选择</a></td>
            </tr>
            </tbody>
            <tr>
                <td colspan="4">
                    <div id="pagenav"></div>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    //vue使用
    var app = new Vue({
        el: "#app",
        data: {
            result: [],
            fieldListresult: [],
            pointListresult: []
        }
    })

    $(function () {
        getExamPaperList();
        getAllField();
        getPointByField();

        //查询按钮
        $("#findExamPaper").click(function () {
            getExamPaperList();
        })
        //父类下拉框
        $("#field").change(function () {
            getPointByField();
            getExamPaperList();
        })
        //子类下拉框
        $("#point").change(function () {
            getExamPaperList();
        })


    })

    //查询用户数据
    var getExamPaperList = function (curr) {
        $.ajax({
            type: 'post',
            url: '/ExamPage/getExamPaperList',
            dataType: 'json',
            data: {
                pageSize: 10,
                pageNum: curr || 1,
                name: $("#examPaperName").val(),
                fieldId: $("#field").val(),
                pointId: $("#point").val()
            },
            success: function (msg) {
                app.result = msg.page;
                laypage({
                    cont: 'pagenav', //分页容器
                    pages: msg.totalPage,//总页数
                    skin: '#0099CC',
                    first: '首页',
                    last: '末页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getExamPaperList(obj.curr);
                        }
                    }
                });
            }, error: function () {
                alert("失败");
            }
        });
    };

    //查询分类列表信息 郭瀚钰
    function getAllField() {
        $.ajax({
            type: 'post',
            url: '/Field/getAllField',
            dataType: 'json',
            success: function (msg) {
                app.fieldListresult = msg.fieldList
            }, error: function () {
                alert("分类列表失败")
            }
        })
    }

    //根据父类获取小类列表信息 郭瀚钰
    function getPointByField() {
        $.ajax({
            type: 'post',
            url: '/Point/getPointByField',
            dataType: 'json',
            data: {
                fieldId: $("#field").val()
            },
            success: function (msg) {
                app.pointListresult = msg.pointList
            }, error: function () {
                alert("子类分类列表失败")
            }
        })
    }

    //点击选择作为遮罩层关闭事件
    function examPaperSelect(e) {
        var v = e.target;
        $("#selectExamPaper", window.parent.document).val($(v).attr("paperName"));
        $("#examPaperId", window.parent.document).val($(v).attr("value"));

        closeShadow()
    }

    function closeShadow() {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }
</script>

